<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            margin: 200px;
        }
        
        span {
            display: inline-block;
            width: 40px;
            height: 40px;
            background-color: #333;
            font-size: 20px;
            color: #fff;
            text-align: center;
            line-height: 40px;
        }
    </style>
</head>

<body>
    <div>
        <span class="hour">1</span>
        <span class="minute">2</span>
        <span class="second">3</span>
    </div>

</body>

<script>
    let hour = document.querySelector('.hour');
    let minute = document.querySelector('.minute');
    let second = document.querySelector('.second');

    function coutDown() {
        let now = new Date().getTime();
        let goal = new Date('2024-9-19 18:00:00');
        let cha = (goal - now) / 1000;
        let h = parseInt(cha / 60 / 60 % 24);
        h = h < 10 ? '0' + h : h;
        hour.innerHTML = h;
        let m = parseInt(cha / 60 % 60);
        m = m < 10 ? '0' + m : m;
        minute.innerHTML = m;
        let s = parseInt(cha % 60);
        s = s < 10 ? '0' + s : s;
        second.innerHTML = s;
    };
    coutDown();
    setInterval(coutDown, 1000);
</script>

</html